<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://unpkg.com/element-plus"></script>
  <style>
    body {
      padding: 0;
      margin: 0;
      color: #333;
      font-size: 14px;
    }

    hr {
      border: 0;
      border-top: 1px solid #ddd;
    }

    h1 {
      margin: 0;
      font-size: 1.2em;
    }

    .home {
      height: 100vh;
      width: 100vw;
      overflow: hidden;
    }

    .home>header {
      background-color: #409eff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
    }

    /* 侧边栏 */
    .sidebar {
      height: 100%;
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12);
    }

    .sidebar span {
      margin-left: 10px;
    }

    .sidebar li.is-active path,
    .sidebar li.is-active rect {
      stroke: #409eff;
    }

    .main {
      background-color: #fbfafa;
      padding: 10px 20px;
      padding-bottom: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      overflow: hidden;
    }

    .main>header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 10px;
      border-bottom: 1px solid #ddd;
      font-weight: bold;
    }

    .main .nav-title,
    .main .search {
      width: 300px;
    }

    .search {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .search .el-input {
      margin: 0 10px;
    }

    .project-container {
      display: flex;
      flex-direction: column;
      flex: 1
    }

    .project-list {
      display: flex;
      flex-direction: row;
      overflow: auto;
      flex-wrap: wrap;
      padding: 5px;
    }

    .file-item {
      width: 180px;
      height: 226px;
      cursor: pointer;
      margin: 10px;

    }


    .file-item .item {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      background-color: #85A9CD;
      overflow-y: hidden;
    }

    .file-item .item img {
      display: inline-block;
    }

    .file-item .item>i {
      flex: 1;
      display: flex;
      align-items: center;
    }

    .file-item .file-info {
      padding: 8px 10px;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      background-color: #fff;
      border: 1px solid #ddd;
    }

    .project-name {
      max-width: 100%;
      font-weight: bold;
      margin-bottom: 2px;
    }

    .project-last-modified {
      color: #999;
    }

    /* 图标 */
    .icon,
    .icon-btn,
    .icon-btn-stroke {
      cursor: pointer;
    }

    /* 奇怪的 bug，点击会选中 */
    .icon-btn-stroke:focus {
      outline: none;
    }

    .icon-btn:hover path {
      fill: #79bbff;
      transition: all .25s ease-in;
    }

    .icon-btn-stroke:hover path {
      stroke: #79bbff;
      transition: all .25s ease-in;
    }

    .dialog {
      border-radius: 5px;
    }

    .dialog header {
      margin-right: 0;
      padding: 20px 20px 12px 20px;
      box-sizing: border-box;
      border-radius: 5px 5px 0 0;
      background-color: #409eff;
    }

    .dialog footer {
      padding-top: 0;
      display: flex;
      justify-content: center;
    }

    .dialog footer button {
      padding: 16px 40px;
    }

    .dialog header span {
      color: #fff;
      font-weight: bold;
    }

    .dialog header svg path {
      fill: #fff;
    }

    .dialog-form {
      width: 100%;
      box-sizing: border-box;
      padding: 0 40px;
    }

    .pagination {
      display: flex;
      justify-content: center;
    }

    /* 下拉框 */
    .dropdown {
      width: 140px;
      display: flex;
      justify-content: space-between;
    }

    .dropdown>span {
      margin-right: 5px;
    }

    .edit-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      transform: translateY(100%);
      transition: all 0.15s ease-in-out;
      display: flex;
      justify-content: space-evenly;
      padding: 15px 0;
      width: 100%;
      background: rgba(90, 88, 88, .86);

    }

    .file-item .item:hover .edit-bar {
      transform: translateY(0);
    }

    .edit-bar.active {
      transform: translateY(0);
    }

    .edit-bar .icon-btn:hover path {
      fill: #B9CFE6;
      transition: all .25s ease-in;
    }

    .el-popover.el-popper.popper {
      padding: 15px 20px;
    }

    .popper-section {
      margin: 10px 0 2px 0;
      display: flex;
      flex-direction: column;
    }

    .popper-section ul {
      list-style: none;
      padding: 0 5px;
      max-height: 200px;
      overflow-y: auto;
    }

    .popper-section li {
      display: flex;
      justify-content: space-between;
      margin: 2px;
    }

    .el-popover.el-popper.sub-popper {
      padding: 5px;
    }

    .edit-auth,
    .file-menu {
      display: flex;
      flex-direction: column;

    }

    .edit-auth button,
    .file-menu button {
      width: 100%;
      border: none;
      padding: 0;
      justify-content: flex-start;
    }

    .edit-auth button:hover,
    .file-menu button:hover {
      background-color: #F9F8F8;
    }

    .edit-auth span {
      position: relative;
      height: 32px;
      display: inline-flex;
      align-items: center;
      padding: 0 5px;
    }

    .edit-auth>span::after {
      position: absolute;
      right: 0;
      content: '';
      background-image: url("");
      background-size: contain;
      background-repeat: no-repeat;
      width: 29px;
      height: 29px;
    }

    .member-limit{
      display: flex;
      align-items: center;
    }
    .member-limit svg {
      margin-right:5px;
    }
    .suggestion {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /* 多余字省略 */
    .ellipsis-text-overflow {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  </style>
</head>

<body>
  <div id="App">
    <el-container class="home">
      <el-header>
        <h1>Jupyter协作平台</h1>

        <!-- 头像 -->
        <span class="user">
          <el-dropdown>
            <span class="el-dropdown-link">
              <user />
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item class="dropdown">
                  <span v-text="'用户名：' + userName" class="ellipsis-text-overflow"></span>
                  <copy @click="copy"></copy>
                </el-dropdown-item>
                <el-dropdown-item divided style="justify-content:center;">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </span>
      </el-header>
      <el-container style="height:100%; width:100%; overflow:hidden;">

        <!-- main 中的侧边栏 -->
        <el-col :span="4">
          <el-menu default-active="1" class="sidebar">
            <el-menu-item index="1">
              <el-icon>
                <sidebar-proj />
              </el-icon>
              <span>项目文件</span>
            </el-menu-item>
            <el-menu-item index="2">
              <el-icon>
                <sidebar-coop />
              </el-icon>
              <span>协作文件</span>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="20" class="main">

          <!-- main 中的顶部 -->
          <header>
            <el-breadcrumb separator=">">
              <el-breadcrumb-item :to="{ path: '/' }">项目文件</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/' }">
                <span v-text="projectName"></span>
              </el-breadcrumb-item>
              <el-breadcrumb-item>项目代码仓库</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- 搜索框 -->
            <span class="search">
              <el-input v-model="searchContent" placeholder="请输入搜索内容" size="large" @keyup.enter="search">
                <template #suffix>
                  <search @click="search" />
                </template>
              </el-input>
              <!-- 新建文件 -->
              <add @click="newFile" />
            </span>
          </header>

          <!-- main 中的项目列表 -->
          <el-main class="project-container">
            <section class="project-list">
              <file-item v-for="item in files" :name="item.fileName" :id="item.fileId" :modified="item.lastModified"
                :member="item.member" @open-file="openFile(item.fileId, $event)" @add-member="addMember"
                @remove-member="removeMember" @delete-file="deleteFile" />
            </section>
          </el-main>

          <!-- main 底部的分页器 -->
          <div class="pagination">
            <el-pagination :page-size="10" :total="totalFileNum" background layout="prev, pager, next"
              @current-change="handlePageChange" />
          </div>

        </el-col>
      </el-container>
  </div>
  </el-container>
  </div>
  <script>
    const Folder = {
      template: `
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="114" height="114" >
          <g>
          <path d="M22.816 12.192h5.76v-2.272c0-0.96-0.768-1.76-1.76-1.76h-6.56l-0.576-1.056c-0.446-0.855-1.323-1.431-2.335-1.44h-12.161c-0.992 0-1.792 0.8-1.792 1.792v4.736h19.424zM22.816 13.376h-20.8l1.376 11.264c0 0.928 0.8 1.696 1.792 1.696h21.632c0.96 0 1.76-0.768 1.76-1.696l1.44-11.264h-7.2z" 
          fill="rgba(133.875,194.055,250.92,1)"></path>
          </g>
        </svg>
      `
    }

    const File = {
      template: `
      <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="122" height="122" >
        <g>
        <path d="M21.333 2.667l6.667 6.667v18.677c-0.001 0.731-0.593 1.323-1.324 1.323h-21.352c-0.729-0.005-1.318-0.594-1.324-1.322v-24.022c0-0.731 0.593-1.323 1.324-1.323h16.009zM23.543 16l-4.716-4.715-1.884 1.888 2.828 2.827-2.827 2.828 1.884 1.887 4.715-4.715zM8.457 16l4.715 4.715 1.885-1.887-2.828-2.828 2.827-2.828-1.883-1.887-4.716 4.715z" 
        fill="#fff"></path>
        </g>
      </svg>
      `
    }
    // 添加项目图标
    const Add = {
      template: `
      <svg class="icon-btn-stroke" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="28" height="28" >
        <g>
        <path d="M10 44H38C39.1046 44 40 43.1046 40 42V14L31 4H10C8.89543 4 8 4.89543 8 6V42C8 43.1046 8.89543 44 10 44Z" 
        stroke="rgba(180.03,169.065,169.065,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
        <path d="M24 21V35" stroke="rgba(180.03,169.065,169.065,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
        <path d="M17 28H24L31 28" stroke="rgba(180.03,169.065,169.065,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
        <path d="M30 4V14H40" stroke="rgba(180.03,169.065,169.065,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
        </g>
      </svg>
      `
    }
    // 搜索图标
    const Search = {
      template: `
      <svg class="icon-btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="22" height="22" >
        <g>
        <path d="M30.428 28.814l-7.377-7.377c1.614-2.073 2.766-4.611 2.766-7.606 0-6.681-5.301-11.983-11.986-11.983-6.681 0-11.983 5.301-11.983 11.987 0 6.685 5.301 11.987 11.987 11.987 2.997 0 5.533-1.155 7.608-2.769l7.374 7.374 1.614-1.614zM4.146 13.83c0-5.301 4.38-9.681 9.683-9.681 5.301 0 9.679 4.38 9.679 9.683 0 2.303-0.924 4.608-2.307 6.222l-1.155 1.152c-1.614 1.383-3.919 2.305-6.223 2.305-5.301 0-9.681-4.383-9.681-9.683z" fill="rgba(222.105,218.025,218.025,1)"></path>
        </g>
      </svg>
      `
    }
    // 描述图标
    const Description = {
      template: `
        <svg class="icon-btn-stroke" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="16" height="16" >
          <g>
          <path d="M5 10H43M5 24H43M5 38H43" stroke="#bbb" stroke-width="4" fill="none"></path>
          </g>
        </svg>
      `
    }
    // 头像图标
    const User = {
      template: `
      <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="20" height="20" >
        <g>
        <path d="M27.488 25.696c-7.36-4.448-15.008-4.608-22.4-0.352-2.624 1.504-4.288 3.488-5.088 5.632h32c-0.704-2.048-2.208-3.904-4.512-5.28zM16 1.024c5.216 0 9.408 4.16 9.44 9.344s-4.192 9.44-9.376 9.504c-5.248 0.032-9.44-4.192-9.472-9.472 0-5.216 4.16-9.376 9.408-9.376z" fill="rgba(250.92,245.05499999999998,245.05499999999998,1)"></path>
        </g>
      </svg>
      `
    }
    // 复制图标
    const Copy = {
      template: `
      <svg class="icon-btn" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2307" width="20" height="20">
        <path d="M755 965.1H174c-42.8 0-77.7-34.8-77.7-77.7V238.9c0-42.8 34.8-77.7 77.7-77.7h581c42.8 0 77.7 34.8 77.7 77.7v648.5c0 42.9-34.9 77.7-77.7 77.7zM174.1 208.5c-16.8 0-30.4 13.6-30.4 30.4v648.5c0 16.8 13.6 30.4 30.4 30.4h581c16.8 0 30.4-13.6 30.4-30.4V238.9c0-16.8-13.6-30.4-30.4-30.4h-581z" 
          fill="#aaa" p-id="2308"></path>
        <path d="M910.4 809.7c-13.1 0-23.6-10.6-23.6-23.6V137.6c0-16.8-13.6-30.4-30.4-30.4h-581c-13.1 0-23.6-10.6-23.6-23.6S262.4 60 275.4 60h581c42.8 0 77.7 34.8 77.7 77.7v648.5c-0.1 12.9-10.7 23.5-23.7 23.5z" 
          fill="#aaa" p-id="2309"></path>
        <path d="M646.3 397.7H282.7c-13.1 0-23.6-10.6-23.6-23.6 0-13.1 10.6-23.6 23.6-23.6h363.6c13.1 0 23.6 10.6 23.6 23.6 0.1 13-10.5 23.6-23.6 23.6zM646.3 586.8H282.7c-13.1 0-23.6-10.6-23.6-23.6s10.6-23.6 23.6-23.6h363.6c13.1 0 23.6 10.6 23.6 23.6s-10.5 23.6-23.6 23.6zM525.1 776H282.7c-13.1 0-23.6-10.6-23.6-23.6s10.6-23.6 23.6-23.6h242.4c13.1 0 23.6 10.6 23.6 23.6S538.2 776 525.1 776z" 
          fill="#aaa" p-id="2310"></path>
      </svg>
      `
    }
    // 侧边栏 项目文件 图标
    const SideBarProj = {
      template: `
      <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="18" height="18" style="border-width: bpx;border-style: undefined" filter="none">
        <g>
        <path d="M5 8C5 6.89543 5.89543 6 7 6H19L24 12H41C42.1046 12 43 12.8954 43 14V40C43 41.1046 42.1046 42 41 42H7C5.89543 42 5 41.1046 5 40V8Z" fill="none" stroke="rgba(85.935,83.89500000000001,83.89500000000001,1)" stroke-width="4" stroke-linejoin="round"></path>
        <path d="M43 22H5" stroke="rgba(85.935,83.89500000000001,83.89500000000001,1)" stroke-width="4" stroke-linejoin="round" fill="none"></path>
        <path d="M5 16V28" stroke="rgba(85.935,83.89500000000001,83.89500000000001,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
        <path d="M43 16V28" stroke="rgba(85.935,83.89500000000001,83.89500000000001,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
        </g>
      </svg>
      `
    }
    // 侧边栏 协作文件 图标
    const SideBarCoop = {
      template: `
      <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="18" height="18" >
        <g>
          <path d="M40 23V14L31 4H10C8.89543 4 8 4.89543 8 6V42C8 43.1046 8.89543 44 10 44H22" stroke="rgba(85.935,83.89500000000001,83.89500000000001,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
          <rect x="28" y="34" width="14" height="8" fill="none" stroke="rgba(85.935,83.89500000000001,83.89500000000001,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></rect>
          <path d="M38 34V31C38 29.3431 36.6569 28 35 28C33.3431 28 32 29.3431 32 31V34" stroke="rgba(85.935,83.89500000000001,83.89500000000001,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
          <path d="M30 4V14H40" stroke="rgba(85.935,83.89500000000001,83.89500000000001,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
        </g>
      </svg>
      `
    }
    // 编辑栏 协作 图标
    const EditBarCoop = {
      template: `
        <svg class="icon-btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="24" height="24" >
          <g>
          <path d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z" 
            fill="#fff"></path>
          </g>
        </svg>
      `
    }
    // 编辑栏 菜单 图标
    const EditBarMenu = {
      template: `
      <svg class="icon-btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="24" height="24" >
        <g>
        <path d="M4 4h10.667v10.667h-10.667v-10.667zM4 17.333h10.667v10.667h-10.667v-10.667zM17.333 4h10.667v10.667h-10.667v-10.667zM17.333 17.333h10.667v10.667h-10.667v-10.667z" 
          fill="#fff"></path>
        </g>
      </svg>
      `
    }
    // 添加协作者 人数 图标
    const CoopMember = {
      template: `
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="16" height="16" >
        <g>
        <circle cx="18" cy="15" r="7" stroke="rgba(108.88499999999999,105.05999999999999,105.05999999999999,1)" stroke-width="4" fill="none"></circle><circle cx="34" cy="19" r="4" stroke="rgba(108.88499999999999,105.05999999999999,105.05999999999999,1)" stroke-width="4" fill="none"></circle><path d="M6 34C6 30.6863 8.68629 28 12 28H24C27.3137 28 30 30.6863 30 34V40H6V34Z" stroke="rgba(108.88499999999999,105.05999999999999,105.05999999999999,1)" stroke-width="4" fill="none"></path><path d="M34 30H38C40.2091 30 42 31.7909 42 34V38H34" stroke="rgba(108.88499999999999,105.05999999999999,105.05999999999999,1)" stroke-width="4" fill="none"></path>
        </g>
      </svg>
      `
    }
    // 加号 图标
    const Plus = {
      template: `
        <svg class="icon-btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="24" height="24" >
          <g>
          <path d="M22.892 14.622h-6.033v-6.033h-1.776v6.033h-6.032v1.775h6.033v6.033h1.775v-6.033h6.033z" 
          fill="rgba(108.88499999999999,105.05999999999999,105.05999999999999,1)"></path>
          </g>
        </svg>
      `
    }

    // 项目文件 组件
    const FileItem = {
      components: {
        File,
        Description,
        EditBarCoop,
        EditBarMenu,
        CoopMember,
        Plus,
      },
      props: ['id', 'name', 'modified', 'member'],
      template: `
      <section class="file-item">
        <div class="item" @click="handleOpen">
          <i><File/></i>
          <div class="file-info">
            <span class="project-name ellipsis-text-overflow" v-text="name"></span>
            <span class="project-last-modified">
              修改 <span v-text="modified"></span>
            </span>
          </div>
          <div class="edit-bar" ref="editBar">

            <!-- 邀请协作者 -->
            <el-popover
              popper-class="popper"
              placement="bottom-start" 
              :width="300" 
              title="邀请协作者" 
              :show-arrow="false" 
              trigger="manual"
              :offset="-10"
              :visible="invitePop"
              @show="show"
              @hide="hide"
            >
              <template #reference>
                <i class="coop-icon" @click="invitePop = !invitePop"><EditBarCoop/></i>
              </template>

              <el-autocomplete
                v-model="userName"
                :fetch-suggestions="searchUser"
                size="large"
                @select="addMember"
                placeholder="输入用户名"
                style="width:100%;"
                :disabled="member.length>=10"
              >
                <template #default="{ item }">
                  <div class="suggestion">
                    <span v-text="item.userName"></span>
                    <Plus/>
                  </div>
                </template>
              </el-autocomplete>

              <section class="popper-section">
                <span class="member-limit">
                  <CoopMember/>
                  <span v-text="member.length"></span>/10
                </span>
                <ul>
                  <li v-for="m in member" :key="m.userId">
                    <span v-text="m.userName"></span>
                    
                    <!--  -->
                    <el-popover 
                      popper-class="sub-popper"
                      placement="bottom-start" 
                      :width="100" 
                      :show-arrow="false" 
                      :visible="editAuthPop[m.userId]"
                      trigger="manual"
                    >
                      <template #reference>
                        <el-button class="edit-auth-btn" :data-id="m.userId" plain @click="editAuthPop[m.userId] = !editAuthPop[m.userId]">可编辑</el-button>
                      </template>
                      <section class="edit-auth" :data-id="m.userId">
                        <span>可编辑</span>
                        <i/>
                        <el-button plain @click.stop="removeMember(m.userId, $event)">移除</el-button>
                      </section>
                    </el-popover>

                  </li>
                </ul>
              </section>
            </el-popover>
            <el-popover 
              popper-class="file-menu"
              placement="bottom-start" 
              :width="100" 
              :show-arrow="false" 
              :visible="fileMenuPop"
              @show="show"
              @hide="hide"
              trigger="manual"
            >
              <template #reference>
                <i @click="fileMenuPop = !fileMenuPop" class="file-menu-icon"><EditBarMenu/></i>
              </template>
              <section class="file-menu">
                <el-button plain @click="deleteDialogVisible = true">删除</el-button>
                <i/>
                <el-button plain @click="download">下载源文件</el-button>
              </section>
            </el-popover>
          </div>
        </div>

        <!-- 确认删除 弹窗 -->
      <el-dialog v-model="deleteDialogVisible" :show-close="false" title="提示" width="450px">
        <span>是否确认删除？</span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="deleteDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="deleteFile">确认</el-button>
          </span>
        </template>
      </el-dialog>
      </section>
      `,
      data() {
        return {
          userName: '',
          invitePop: false,
          fileMenuPop: false,
          editAuthPop: {},
          // 确认删除弹窗
          deleteDialogVisible: false,
        }
      },
      mounted() {
        document.addEventListener('click', this.handleClick)
      },
      beforeDestroy() {
        document.removeEventListener('click', this.handleClick)
      },
      methods: {
        handleClick(e) {
          // invitePop
          let target = e.target.closest('.popper, .coop-icon, .popper-section, .suggestion, .edit-auth')
          if (!target) this.invitePop = false
          // fileMenuPop
          target = e.target.closest('.file-menu-icon')
          if (!target) this.fileMenuPop = false
          // editAuthPop
          target = e.target.closest('.sub-popper')
          const targetBtn = e.target.closest('.edit-auth-btn')
          const id = targetBtn ? targetBtn.dataset.id : null

          if (!target || !targetBtn) {
            for (let key in this.editAuthPop) {
              if (key != id) this.editAuthPop[key] = false
            }
          }
        },
        show() {
          this.$refs.editBar.classList.add('active')
        },
        hide() {
          this.$refs.editBar.classList.remove('active')
        },
        // 打开文件
        handleOpen(e) {
          const target = e.target
          const isEditBar = !!(target.closest('.edit-bar'))
          if (isEditBar) return;

          this.$emit('open-file')
        },
        // 删除文件
        deleteFile() {
          this.deleteDialogVisible = false
          const fileId = this.id
          this.fileMenuPop = false
          this.$emit('delete-file', fileId)
        },
        // 添加协作者
        addMember({ userName, userId } = {}) {
          const fileId = this.id
          if (!userId) return
          this.$emit('add-member', fileId, userId, userName)
        },
        // 移除协作者
        removeMember(userId) {
          const fileId = this.id
          this.editAuthPop[userId] = false
          this.$emit('remove-member', fileId, userId)
        },
        // TODO: 📌下载源文件
        async download() {
          const fileId = this.id
          console.log("[download]", fileId)
          this.fileMenuPop = false
        },
        // TODO: 📌搜索用户
        async searchUser(queryString, callback) {
          // 搜索框的内容：this.userName
          // callback(result) 返回数据
          callback([{ userName: '小红', userId: '123' }, { userName: '小小红', userId: '456' }])
        },
      }
    }

    const app = Vue.createApp({
      components: {
        Folder,
        'copy': Copy,
        'user': User,
        'search': Search,
        'file-item': FileItem,
        'sidebar-proj': SideBarProj,
        'sidebar-coop': SideBarCoop,
        'add': Add,
      },
      data() {
        return {
          projectId: "",// TODO
          userName: '孜然123456789',
          searchContent: '',
          totalFileNum: 20,
          projectName: '科研项目xx',
          files: [
            {
              fileName: "代码名xxxx", fileId: "123", lastModified: "2022-7-20 10:22",
              member: [{ userName: '小明', userId: 1 }, { userName: '小红', userId: 2 }, { userName: '小明', userId: 3 }, { userName: '小红', userId: 4 }, { userName: '小明', userId: 5 },]
            },
            {
              fileName: '代码名xxxx', fileId: "456", lastModified: "2022-7-20 23:45",
              member: [{ userName: '小明', userId: 12 }, { userName: '小红', userId: 12 }]
            },
          ],
        }
      },
      mounted() {
        // this.getFiles(1)
      },
      methods: {
        // TODO: 📌获取文件列表
        async getFiles(page, limit = 20) {
          const body = {
            page,
            limit,
            projectId: this.projectId
          }

          const res = await fetch('/project/listProjectInfo', {
            method: "POST",
            body
          })

          const files = await res.json()
            .then(res => {
              this.$message({
                message: "获取项目列表成功",
                type: "success"
              })
              this.totalProjectNum = res.total
              return res.data
            })
            .catch(err => {
              this.$message({
                message: "获取项目列表失败",
                type: "error"
              })
              this.totalFileNum = 0
              return []
            })

          this.files = files
        },
        // TODO: 📌翻页
        handlePageChange(curPage) {
         
        },
        // TODO: 📌搜索
        search() {
          this.getFiles()
        },
        // TODO: 📌删除文件
        async deleteFile(fileId) {
          console.log('[delete]', fileId)
        },
        // TODO: 📌项目添加协作者
        async addMember(fileId, userId, userName) {
          console.log('addMember', fileId, userName, userId)

          this.getFiles()
        },
        // TODO: 📌移除协作者
        async removeMember(fileId, userId) {
          console.log('removeMember', fileId, userId)
          this.getFiles()
        },
        // TODO: 新建文件
        newFile(){
          console.log('[new File]')
        },
        // TODO: 打开代码文件
        openFile(fileId) {
          console.log('[open]', fileId)
        },

        // 复制用户名
        copy() {
          const userNameElem = document.querySelector('.dropdown > span')
          const range = new Range();
          range.selectNodeContents(userNameElem)

          document.getSelection().removeAllRanges(); // 清除现有选择
          document.getSelection().addRange(range);

          const str = document.getSelection().toString().slice(4)
          if (navigator && navigator.clipboard) {
            navigator.clipboard.writeText(str)
              .then(() => {
                this.$message({
                  message: '复制成功！',
                  type: 'success',
                })
              })
          }
          document.getSelection().removeRange(range);
        },
      },
    })
    app.use(ElementPlus)
    app.mount('#App')

  </script>
</body>

</html>